<template>
	<view class="setting-container">
		<!-- 设置项分组 -->
		<view class="setting-group" v-for="(group, index) in settingGroups" :key="index">
			<view class="cell-group">
				<view class="cell" v-for="item in group.items" :key="item.name || item.title"
					@click="navigateTo(item.name)">
					<!-- 图标（可选） -->
					<view class="cell-icon" v-if="item.icon">
						<uni-icons :type="item.icon" size="20" color="#3273dc"></uni-icons>
					</view>

					<!-- 标题 -->
					<view class="cell-title">{{ item.title }}</view>

					<!-- 箭头图标 -->
					<uni-icons type="right" size="16" color="#c8c8c8"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 设置项分组配置（补充了部分图标示例）
				settingGroups: [{
						items: [{
								title: '修改手机号码',
								name: '',
								icon: 'phone'
							},
							{
								title: '修改登录密码',
								name: 'updatePwd',
								icon: 'lock'
							},
							{
								title: '账号绑定管理',
								name: '',
								icon: 'link'
							}
						]
					},
					{
						items: [{
							title: '登录设备管理',
							name: '',
							icon: 'device'
						}]
					},
					{
						items: [{
							title: '注销账号',
							name: '',
							icon: 'trash'
						}]
					}
				],
				isLoggedIn: true // 实际项目中从vuex或storage获取
			}
		},
		methods: {
			// 路由跳转方法（适配UniApp多端）
			navigateTo(routeName) {
				if (!routeName) {
					// 未配置路由的项提示暂未实现
					uni.showToast({
						title: '功能暂未开放',
						icon: 'none',
						duration: 2000
					})
					return
				}

				// 特殊路由处理（如清理缓存）
				if (routeName === 'clearCache') {
					this.clearCache()
					return
				}

				// 普通路由跳转
				uni.navigateTo({
					url: `/pages/user/${routeName}` // 假设路由路径格式
				})
			},

			// 清理缓存方法
			clearCache() {
				uni.showLoading({
					title: '清理中...',
					mask: true
				})

				// 模拟清理缓存
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '缓存已清理',
						icon: 'success'
					})
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.setting-container {
		padding: 15px;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.setting-group {
		margin-bottom: 15px;
	}

	/* 单元格组样式 */
	.cell-group {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

	/* 单元格样式 */
	.cell {
		display: flex;
		align-items: center;
		padding: 14px 15px;
		border-bottom: 1px solid #eee;
	}

	.cell:last-child {
		border-bottom: none;
	}

	.cell-icon {
		margin-right: 12px;
	}

	.cell-title {
		flex: 1;
		font-size: 16px;
		color: #333;
	}
</style>